<template>
<!--  <langarange>-->
  <a-layout class="layout-demo">
    <a-layout-sider
      :theme="getThem"
      breakpoint="lg"
      :width="230"
      collapsible
      :collapsed="collapsed"
      @collapse="onCollapse"
    >
      <div class="logo" />
        <a-menu
           class="menu-class"
           ref="menuClass"
          :accordion="true"
           :theme="getThem"
        :defaultOpenKeys="['driver_account']"
        :defaultSelectedKeys="['driver_account']"
        @menuItemClick="onClickMenuItem"
      >

        <a-sub-menu  v-for="menus in getMenuData" :key="menus.key" >
          <template #title>
            <span ><icon-font :type="menus.type" />{{menus.title}}</span>
          </template>
          <a-menu-item v-for="menu in   menus.data" :key="menu.key">
            <icon-font :type="menu.type" />{{menu.title}}
          </a-menu-item>
        </a-sub-menu>

        <!-- 系统配置 -->
        <a-sub-menu key="system">
          <template #title>
            <span><icon-settings />系统管理</span>
          </template>

          <a-menu-item key="rule">
            <icon-font type="icon-guize"  />业务规则
          </a-menu-item>

          <a-menu-item key="config">
            <icon-tool />系统配置
          </a-menu-item>

          <a-sub-menu key="auth" title="权限管理" >
            <template #title>
              <span><icon-font type="icon-quanxian" />权限管理</span>
            </template>
            <a-menu-item key="user">
              <icon-user-group />用户管理
            </a-menu-item>
            <a-menu-item key="role">
              <icon-robot />角色管理
            </a-menu-item>
            <a-menu-item key="dept">
              <icon-font type="icon-bumen" ></icon-font> 部门管理
            </a-menu-item>
            <a-menu-item key="post">
              <icon-idcard />岗位管理
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="monitor" >
            <template #title>
              <span><icon-font type="icon-denglushimima" />系统监控</span>
            </template>
            <a-menu-item key="oper_log">
              <icon-history />操作日志
            </a-menu-item>
            <a-menu-item key="login_log">
              <!-- icon-denglu -->
              <icon-font type="icon-denglu1"/>登录日志
            </a-menu-item>
            <a-menu-item key="safe_center">
              <icon-safe />安全中心
            </a-menu-item>
            <a-menu-item key="bug_log">
              <icon-bug />bug处理中心
            </a-menu-item>
          </a-sub-menu>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>

    <a-layout>
      <a-layout-header>
        <a-menu
            :openKeys="['1']"
            :selectedKeys="['1_2']"
            mode='horizontal'
            :theme="getThem"
            @menuItemClick="onClickMenuItem"
        >
          <a-menu-item key="0_1" >
            <IconHome />
            Menu 1
          </a-menu-item>

          <a-menu-item key="0_2">
            <IconCalendar />
            Menu 2
          </a-menu-item>

          <a-sub-menu key="1">
            <template #title>
              <span><IconCalendar />Navigation 1</span>
            </template>
            <a-menu-item key="1_1">Menu 1</a-menu-item>
            <a-menu-item key="1_2">Menu 2</a-menu-item>

            <a-sub-menu key="2" title="Navigation 2">
              <a-menu-item key="2_1">Menu 1</a-menu-item>
              <a-menu-item key="2_2">Menu 2</a-menu-item>
            </a-sub-menu>

            <a-sub-menu key="3" title="Navigation 3">
              <a-menu-item key="3_1">Menu 1</a-menu-item>
              <a-menu-item key="3_2">Menu 2</a-menu-item>
              <a-menu-item key="3_3">Menu 3</a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
<!--icon-youhuijuan4-->
          <a-sub-menu key="4">
            <template #title>
              <span><IconCalendar />Navigation 4</span>
            </template>
            <a-menu-item key="4_1">Menu 1</a-menu-item>
            <a-menu-item key="4_2">Menu 2</a-menu-item>
            <a-menu-item key="4_3">Menu 3</a-menu-item>
          </a-sub-menu>
          <div class="back-class" style="display: flex;justify-content:space-between;flex-direction:row;align-items:center;width: 600px; height: 58px; position: absolute; top: 0; left: 55%; background: transparent;">
            <back-color  @modifyPopHeaderss="modifyPopHeaderss" @modifyPopHeaders="modifyPopHeaders" @modifyPopHeader="modifyPopHeader" @modifyDark="modifyDark" @modifyBac="modifyBac" :testFun="testFun"/>
            <a-button type="primary"  class="bac-btn-class" shape="round"  v-for="text in navText()" >
              <template #icon>
                <icon-font :type="text.icon" />
              </template>
              <!-- Use the default slot to avoid extra spaces -->
              <template #default> {{ text.text }}</template>
             </a-button>
          </div>
        </a-menu>
      </a-layout-header>
      <a-layout style="padding: 0 24px">
        <a-breadcrumb :style="{ margin: '16px 0' }">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content>
          <router-view/>
         </a-layout-content>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout>

</template>
<script>
import {defineComponent, onMounted, ref,h} from 'vue';
import { Message } from '@arco-design/web-vue';
import '@/style/success.css'
import {IconFont} from '@/components/icon'
import langarange from "@/components/util/langarange.vue";
import {menuData} from "@/data/menu-data.js";
import hooks from "@/hooks/index.js";
import {useRouter} from "vue-router";
import {
  IconHome,
  IconCalendar,
} from '@arco-design/web-vue/es/icon';
 import store from "@/store/index.js";
import BackColor from "@/components/util/backColor.vue";
import {navText} from "@/components/util/content.js";
import {v4 as uuid} from 'uuid'
export default defineComponent({
  methods: {
    navText() {
      return navText
    }
  },
  computed: {
    getMenuData() {
      return  menuData;
    },
    getThem:()=>store.state.them
  },
  components: {
    BackColor,
    IconHome,
    IconCalendar,
    IconFont,langarange
  },
  setup() {
      const  {driver ,customer} = menuData
      const collapsed = ref(false);
      const router = useRouter();
      const {
        modifyBac
        ,testFun,
        modifyDark,
        modifyPopHeader,
        modifyPopHeaders,
        modifyPopHeaderss} = hooks();
      const onCollapse = (val, type) => {
      const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩';
      collapsed.value = val;
    }
    const   onClickMenuItem = async  (key)=> {
        // alert(key)
      let time = new Date().getTime();
      try {
        const result = await router.push({
          name: `${key}`,
          query: {key, time: time, keyword: uuid()},
        })
      } catch (error) {
        Message.warning({ content: error.message,resetOnHover:true, icon: () => h(IconFont,{type:'icon-weiwangguanicon-defuben-'})});
      }
      // router.push({
      //   path: `/success/${key}`,
      //   query: { id: 456, name: '李四' },
      // });
    }
    return {
      collapsed,
      onCollapse,
      driver,
      customer,
      langarange,
      onClickMenuItem,
      testFun,
      modifyBac,
      modifyDark,
      modifyPopHeader,
      modifyPopHeaders,
      modifyPopHeaderss
    };
  }
});
</script>

